<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';

export default defineComponent({
    props: {
        dataInfo: {
            type: Array,
            default: () => {
                return [
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                    // { name: '风电场1', center: '100',lg:'35.03N',types:'WT1500-D82' },
                ]
            },
        },
    },
    setup(props) {
        const dataContainer = reactive({
            loading: false,
            dataInfo:[]
        });
        watch(
            () => props.dataInfo,
            (newDataInfo) => {
                dataContainer.dataInfo = []
                newDataInfo.forEach(v=>{
                    dataContainer.dataInfo.push({name:v[0],center:v[1],lg:v[2],types:v[3]})
                })
                // dataContainer.dataInfo = 
                // console.log(newDataInfo)
                //  optionFunc()
            },
            {
                immediate: true,
                deep: true,
            },
        );

        onMounted(() => {

        });
        return {
            dataContainer,

        };
    },
});
</script>

<template>
    <div class="right_4">
        <el-table :data="dataContainer.dataInfo" stripe height="100%">
            <!-- <el-table-column label="序号" type="index" width="60"  align="center" /> -->
            <el-table-column label="电站名称" show-overflow-tooltip width="80" align="center" prop="name"  />
            <el-table-column label="装机容量(MW)" show-overflow-tooltip align="center" prop="center"  />
            <el-table-column label="装机容量(MWh)" show-overflow-tooltip align="center" prop="lg"  />
            <el-table-column label="充放电效率(%)" show-overflow-tooltip align="center" prop="types"  />
         


        </el-table>
    </div>
</template>

<style lang="scss" scoped>
.right_4 {
    width: 100%;
    height: 100%;

    ::v-deep .el-table,
    ::v-deep .el-table--border {
        background-color: transparent !important;
        color: #ABDDEF;
    }

    ::v-deep .el-table .el-table__header-wrapper th {

        background-color: transparent;
        color: #ABDDEF;
    }

    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: #09203d !important;
    }

    ::v-deep .el-table tr,
    ::v-deep .el-table__body tr:hover>td {
        background-color: transparent !important;
    }

    ::v-deep .el-table th.el-table__cell,
    .el-table th.el-table__cell.is-leaf {

        border: none !important;
    }

    ::v-deep .el-table__inner-wrapper::before {
        background-color: rgba(0, 62, 90, 0.5);

    }

    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom-color: #003E5A !important;
    }
}
</style>
